<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 500px;
            background-color: red;
        }

        #box h2 {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <div id="box"></div>
    <script>

        /*
         dom 
 
             查询 
                 document.querySelector all -》$()
             属性 
                 标准属性
                     dom.属性名 
                     dom.属性名 = 属性值
                     dom.checked 
                     dom.checked =true
 
 
                     -》jq 
                         $('#ck1').prop('属性名')
                         $('#ck1').prop('属性名','属性值')
                 自定义属性
                     dom.setAttribute()
                     dom.getAttribute()
                     dom.rmoveAttribute()
                     dom.dataset.xx -> data-xx
 
                     ->jq
                         $().attr(key)
                         $().attr(key,value)
 
 
             内容
                 ipt.value
                 div.innerHTML
                 div.innerText
                 ->jq
                 $().val()
                 $().val('aa')
                 $().html()
                 $().html('aa')
 
                 $().text()
                 $().text('bb')
 
 
 
             样式
                 获取样式
                     getComputedStyle 最终样式
                 设置样式
                     dom.style.xx = 'xx'   行内样式
 
                  -》jq
                       获取样式
                     $().css(key)   
                      设置样式
                     $().css(key,value)   
 
                     $().css({key:value,key1:value2})   
 
 
             class
                  dom.className 
                  dom.className = 'a'
                  dom.classList.add()
                  dom.classList.remove()
                  dom.classList.replace()
                  dom.classList.toggle()
                  dom.classList.contains()
 
             dom节点关系   ->       筛选器  父子 兄弟 
 
             dom 创建-添加-删除-替换

                let div = document.creatElement('div')
                div.innerHTML = 'aa'

                document.body.appendChild(div)
                div.remove()
                document.body.repalceChild()
                document.body.insertBefore()

                jq->
                    $('body').append('<div>world</div>')
                    $('body').before('<div>world</div>')
                    $('body').after('<div>world</div>')
                    $('#box').remove()
                    $('#box').empty()
                    $('#box').repalceWith('<h2>h2</h2>')

                    $('#box').clone()



     */

        //  创建div--返回不是原生dom元素-，返回的是伪数组
        let $div = $('<div>hello</div>')
        console.log($div);
        // 添加
        $('body').append($div);
        // $('body').append($('<div>hello</div>'));

        // 简写 
        $('body').append('<div>world</div>')
        $('body').prepend('<div>world222</div>')

        //把创建的元素 添加到 #box的尾部
        $('<h2>ppp</h2>').appendTo('#box')
        //把创建的元素 添加到 #box的头
        $('<h2>iii</h2>').prependTo('#box')


        // 把创建的h1添加到 #box 前面
        // $('<h1>h1</h1>').insertBefore('#box')
        // $('#box').before('<h1>h1</h1>')

        // 把创建的h1添加到 #box 后面
        // $('<h1>h1</h1>').insertAfter('#box')
        // $('#box').after('<h1>h1</h1>')


        // 使用后面的替换前面的
        // $('#box').replaceWith('<h1>0000</h1>')



        // 接受两个参数
        //   参数1： 自己身上的事件要不要复制 默认false，
        //   参数2： 所有子节点身上的事件要不要复制

        // 给选中的元素添加事件
        // $('#box h2').click(function () {
        //     console.log('h2');
        // })

        // $('#box').click(function () {
        //     console.log('box');
        // })
        // $('#box').clone(true, false).appendTo('body')



        // 删除元素

        // $('#box').remove()

        // 请空box的子元素
        $('#box').empty()

    </script>

</body>

</html>